@charset "utf-8";
$rems: 37.5px;
@function w($px) {
    @return ($px/$rems)*1rem;
}

html {
    font-size: $rems;
}
body{
    position: relative;
}
.musicbutton {
    width: w(30px);
    height: w(30px);
    position: absolute;
    z-index: 9999;
    top: w(20px);
    right: w(20px);
    text-align: center;
    background: #E7C598;
    line-height: w(30px);
    border-radius: 50%;
    animation: mu 4s infinite;
    @-webkit-keyframes mu {
        from {
            transform: rotateX(0);
        }
        to {
            transform: rotateX(360deg);
        }
    }
    .iconfont {
        display: block;
        font-size: w(25px);
        color: #BF0C21;
        animation: music 4s infinite;
    }
    @keyframes music {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(360deg);
        }
    }
    @-webkit-keyframes music {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(360deg);
        }
    }
}

.content {
    .alert_son {
        height: auto;
        background-image: url("../images/01.jpg");
        .bg_title {
            padding-top: w(30px);
            width: w(200px);
            margin: 0 auto;
        }
        .my_order {
            margin: 0 auto;
            width: w(300px);
            height: w(49px);
            background: #e7c598;
            div {
                width: w(40px);
                height: w(40px);
                border-radius: 50%;
                background: red;
                margin: 0 auto;
                overflow: hidden;
                text-align: center;
            }
            table {
                width: 100%;
            }
            table tr td {
                text-align: center;
                font-size: w(18px);
                padding: w(8.87px) 0;
                color: white;
                &:nth-child(1) {
                    text-align: center;
                    width: 15%;
                }
                &:nth-child(2) {
                    width: 18.9%;
                }
                &:nth-child(3) {
                    text-align: left;
                }
                &:nth-child(4) {
                    color: white;
                    text-align: center;
                }
            }
        }
        .tab {
            position: relative;
            width: w(300px);
            height: w(487.25px);
            border-bottom: 1px solid white;
            overflow-y: scroll;
            margin: 0 auto;
            scrollbar-track-color: transparent;
            table {
                width: 100%;
                border: w(1px) solid white;
                tr {
                    border-bottom: w(1px) solid white;
                    td {
                        text-align: center;
                        font-size: w(18px);
                        padding: w(9.97px) 0;
                        color: white;
                        .circle {
                            width: w(40px);
                            height: w(40px);
                            border-radius: 50%;
                            background: red;
                            margin: 0 auto;
                            overflow: hidden;
                            text-align: center;
                        }
                        .first {
                            color: yellow;
                        }
                        .second {
                            color: goldenrod;
                        }
                        &:nth-child(1) {
                            text-align: center;
                            width: 15%;
                        }
                        &:nth-child(2) {
                            text-align: left;
                        }
                        &:nth-child(3) {
                            text-align: left;
                        }
                        &:nth-child(4) {
                            color: white;
                            text-align: center;
                        }
                    }
                }
            }
        }
        .icons {
            position: fixed;
            width: w(42px);
            height: w(42px);
            line-height: w(42px);
            text-align: center;
            border-radius: 50%;
            background: #e7c598;
            right: 0;
            bottom: w(24px);
            margin-right: w(20px);
            span {
                color: red;
                font-size: w(35px);
            }
            &:after {
                content: '';
                display: block;
                clear: both;
            }
        }
    }
}

@media only screen and (min-width:376px) and (max-width:400px) {
    .content .alert_son .tab {
        height: w(475px);
    }
}